<template>
	<div id="app">
		<div id="nav" class="animate__animated  animate__flip ">
			<div>
				<router-link to="/">主页</router-link> |
				<router-link to="/about">高德地图</router-link>
			</div>
			<img alt="Vue logo" src="./assets/logo.png">
		</div>
		<router-view />
	</div>
</template>
<script>
	export default {
		created() {
			this.bus.$on('qwer', e => console.log(e))
		}
	}
</script>
<style lang="scss">
	/*去高德地图水印*/
	.amap-logo {
		display: none !important;
	}

	.amap-copyright {
		display: none !important;
	}

	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
	}

	#nav {
		display: flex;
		flex-direction: column;
		align-items: center;

		img {
			width: 200px;
		}

		padding: 30px;

		a {
			font-weight: bold;
			color: #2c3e50;

			&.router-link-exact-active {
				color: #42b983;
			}
		}
	}
</style>
